@import "../../style/public";

.store-compare-component {
  background: #fff;
  line-height: 1.1;
  height: inherit;
  display: flex;
  flex-direction: column;
  &.all{
    .section{
      height: 100%;
      display: flex;
      flex-flow: column;
    }
    .scroll-wrap {
      // .table{
      //   @include remCalc(margin,0, 0,260,0);
      // }
      @include remCalc(padding,0, 0,200,0);
    }

  }
  .chart-width{
    .table{
      li{
        line-height: initial;
        >div{
          @include remCalc(padding,10,0);
          &:first-child{
            width:40%;
          }
        }
      }
    }
  }
  .scroll-container{
    flex:1;
    height:100%;
   // overflow-y: auto;
    @include remCalc(padding,0, 30);

  }
  .scroll-wrap {
    overflow-y: scroll;
    position: relative;
  }
  .no-more {
    text-align: center;
    color: #999;
    @include remCalc(font-size, 24);
    @include remCalc(padding-top, 30);
  }
  .page-infinite-loading{
    text-align: center;
  }
  .hide {
    display: none !important;
  }
  .tab-bar {
    display: flex;
    border: 1px solid $color-red;
    border-radius: 4px;
    overflow: hidden;
    @include remCalc(margin, 50, 0, 40, 0);
    li {
      flex: 1;
      text-align: center;
      @include remCalc(height, 80);
      @include remCalc(line-height, 80);
      @include remCalc(font-size, 30);
      color: $color-red;
      background: #fff;
      border-left: 1px solid $color-red;
      box-sizing: border-box;
      &:first-child{
        border-left:none;
      }

      &.selected {
        background: $color-red;
        color: #fff;
      }
    }
  }
  .section-title {
    box-sizing: border-box;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    @include thin-border(false, false, bottom);
    @include remCalc(font-size, 30);
    @include remCalc(margin-left, 30);
    color: #666;
  }
  .section-container {
    @include remCalc(padding,0, 30);
  }

  %section {
    @include remCalc(margin-bottom, 20);
    @include thin-border(true, false);
    background: #fff;
  }
  @extend %section;
  //@include remCalc(padding, 0, 30, 20, 30);
  .table {
    @include remCalc(font-size, 24);
    @include remCalc(margin, 0, 0, 0, 30);
    color: #333;
    > li {
      display: flex;
      @include thin-border(false, false, bottom);
      @include remCalc(height, 90);
      @include remCalc(line-height, 90);
      box-sizing: border-box;
      > div {
        box-sizing: border-box;
        word-break: break-all;
        display: flex;
        justify-content: center;
        flex-flow: column;
        &:first-child {
          @include remCalc(width, 76,!important);
          & + div {
            @include remCalc(padding-right, 50);
            @extend %text-overflow;
            flex: 1;
            & + div {
              @include remCalc(width, 176);
              & + div {
                @include remCalc(width, 118);
              }
            }
          }
        }
      }
    }
  }
  .all-store{
    @include remCalc(font-size, 30);
    color: #333;
    @include remCalc(height, 90);
    @include remCalc(line-height, 90);
    @include remCalc(padding,0, 30);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    i{
      color:#c9c9cd;
    }
  }
}
.ordersource-component{
  @extend .store-compare-component;
   background: #fff !important;
  .table{
    li{
      line-height: initial;
      >div{
        @include remCalc(padding,10,0);
        &:first-child{
          width:40% !important;
        }
      }
    }
  }
}
